<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>页面的脚本 Scripting pages-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/page/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>页面的脚本 Scripting pages</h1>
				<div class="desc">
				<div>因为jQuery Mobile 是使用Ajax驱动的导航系统,所以在编写控制内容的脚本的时候有一些事情要注意。你可以查阅api中的全局设置选项，事件和方法或者深入研究Ajax导航的模型来了解更多的细节。</div>
                </div>
  <hr /> 


				<h1>头部的脚本和方法 Scripts & styles in the head</h1>
				<div class="desc">
				<div>当用户点击一个jQuery Mobile驱动的网站的链接，那默认会通过Ajax请求页面。（而不是是浏览器通过默认的链接方法家在整个页面）。当请求发出以后，框架会接收到内容，但是他只会将请求的页面的body 内容插入到DOM中（或者只是 data-role="page" 的容器），这就意味着head标签中的元素不会被请求到。</div>
                </div>
				<div class="desc">
				<div>这就意味着在HEAD中引用的脚本和样式在用通过AJAX加载后不会起作用，只能通过普通的HTTP请求执行。当编写jQuery Mobile 网站的脚本时，两种情况都要因为考虑。通过AJAX加载的页面会无视head 中的内容是因为重新执行相同的JS的几率是很高的（因为整站的每个页面可能都引用同样的JS文件）。而解决这个问题相对比较复杂，所以我们让开发人员来决定每个页面特定的JS，而假定头部的脚本是每个session只执行一遍的。</div>
                </div>
				<div class="desc">
				<div>构建一个jQuery Mobile网站的最简单的办法就是在每一个页面的head都引用相同的css和js.如果你想为某一个页面特定的加载JS或CSS，我们建议用pagecreate事件将逻辑绑定进去，在页面被创建的时候执行需要的代码。这样可以保证代码在页面被直接加载或者通过Ajax请求到的时候被执行。</div>
                </div>
				<div class="desc">
				<div>另一个给某一个页面特定的加载JS的办法是在BODY底部加载。如果你用这种方法引入你的脚本，要注意这些脚本在页面通过AJAX请求或者通过HTTP请求到的时候都会执行。所以如果这些脚本在每个页面都是一样的，那么可能就会出问题。如果你想这样引入页面，我们建议在data-role="page" 容器中将内容包裹，然后在这个容器外面引入你的脚本。</div>
                </div>  
  <h1>pagecreate = DOM ready</h1>
				<div class="desc">
				<div>你学习jquery的第一件事就是知道使用$(document).ready()方法在DOM已经准备好时执行代码（经常要远远早于onload事件）。但是在jQuery Mobile网站中，页面是被请求然后插入到同样的dom元素中，所以DOM ready事件是不起作用的，只是在首个页面起作用。所以要在加载新页面的时候执行代码，你可以给pagecreate 事件绑定代码。</div>
                </div>
				<div class="desc">
				<div>pagecreate事件会在页面初始化的时候被触发，跟在initialization事件之后。大多数 jQuery Mobile的UI组件都是在这个事件后初始

化。 </div>
                </div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( document ).delegate( &quot;pagecreate&quot;, &quot;#aboutPage&quot;, function() {<br>  alert('A page with an ID of &quot;aboutPage&quot; was just created by jQuery Mobile!');<br>});</pre>
</div>
				<p class="indent"><strong>如果你想在pagecreate事件之前，以及在UI组件初始化之前控制页面内容，你也可以使用pagebeforecreate 事件：</strong></p>
				<div class="code">
				  <pre>$( document ).delegate( &quot;pagecreate&quot;, &quot;#aboutPage&quot;, function() {<br>  alert('A page with an ID of &quot;aboutPage&quot; was just created by jQuery Mobile!');<br>});</pre>
</div>
  <hr /> 
  
  				<h1>改变页面 Changing pages</h1>
				<div class="desc">
				<div>如果你想通过JS改变现在活动的页面，可以使用changePage 方法。有很多方法和属性在改变页面的时候进行控制，下面是两个例子：</div>          
  </div>
                
				<p class="indent">//用slideup效果转到about us页面</p>
				<div class="code">
				  <pre>$.mobile.changePage( &quot;about/us.html&quot;, { transition: &quot;slideup&quot;} );</pre>
</div>
 	<p class="indent">//使用ID为earch的表单数据转到"search results"页面</p>
				<div class="code">
				  <pre>$.mobile.changePage( &quot;searchresults.php&quot;, {<br>	type: &quot;post&quot;, <br>	data: $(&quot;form#search&quot;).serialize()<br>});</pre>
</div>
  				<h1>加载页面 Loading pages</h1>
				<div class="desc">
				<div>使用loadPage 方法加载外部页面，并渲染其内容。有很多方法和属性在加载页面的时候进行控制。</div>          
  </div>
 	<p class="indent">//将"about us"页面加载到DOM</p>
				<div class="code">
				  <pre>$.mobile.loadPage( "about/us.html" );</pre>
</div>
  				<h1>渲染新的标记 Enhancing new markup</h1>
  <div class="desc">
				<div>页面插件会分配一个“pagecreate”事件，大多数UI插件会使用它进行自我初始化。在某个插件的脚本被引用后，他会自动渲染页面上的插件的实例。</div>
  </div>
  <div class="desc">
				<div>但是，如果你在客户端生成了新的标记，或者通过ajax加载了内容并且插入到了页面中。你就可以为新的标记中的插件触发create事件来处理自动初始化的这个事件。这个事件可以在任何元素上触发(甚至在PAGE本身)，来节省你处理每个插件初始化过程的时间。</div>
  </div>
  <div class="desc">
				<div>例如，如果某段HTML标记（比如登录表单）是通过AJAX加载的，你可以触发create 事件自动将他包含的所有部件渲染为增强后的版本。代码如下：</div>
  </div>
				<div class="code">
				  <pre>$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );</pre>
                </div>
  				<h1>Create 和refresh的差别 Create vs. refresh: An important distinction</h1>  
  <div class="desc">
				<div>注意在某些UI组件上create 事件和refresh 方法是有很大区别的。create事件用于将包含UI组件的原始的HTML标记渲染。而refresh 方法应该用在已经存在的组件上，来手动通过程序刷新他。</div>
  </div>  
   <div class="desc">
				<div>例如，如果您想动态的将一个新的data-role=listview 的UL在页面已经创建后插入到页面中，那在父容器中触发create事件会将列表转化为JQM的样式。然后如果UL中通过程序加了一个LI,那就需要调用refresh 方法才刷新。</div>
  </div>     
  				<h1>滚屏到一个位置 Scrolling to a position within a page</h1> 
  <div class="desc">
				<div>因为我们使用URL的哈希值来维持后退按钮的行为，使用页面的ID来滚屏到页面的某个位置的方法就不能用了。所以使用silentScroll方法来滚屏到一个Y值的位置而不触发scroll事件。你可以传一个yPos参数来滚屏到一个Y值的位置。</div>
  </div> 
				<div class="code">
				  <pre>//scroll to Y 300px 			
$.mobile.silentScroll(300);</pre>
                </div>
  				<h1>给 鼠标和touch事件绑定脚本 Binding to mouse and touch events</h1> 
  <div class="desc">
				<div>在移动设备上要考虑的一个很重要的问题就是处理鼠标和touch 事件。这些事件在不同的平台上差异很大，但是click 事件都是通用的

，通常会延迟500-700ms。这个延迟会让浏览器等待可能会发生的第二次tap,滚屏和hold tap事件。要想避免这个延迟，可以绑定touch 

的事件（例如touchstart) ），但是有些平台不支持touch. </div>
  </div> 
  <div class="desc">
				<div>我们提供了一系列“虚拟的”鼠标事件试图把鼠标和触摸事件抽象出来。这使得开发者能够给一些基础的鼠标事件，例如mousedown, mousemove, mouseup, 和click来注册监听。插件会
在触摸环境中，插件会保持在传统鼠标环境下触发的顺序，例如：vmouseup总是在vmousedown之前被触发，vmousedown总是在vmouseup 之前，等等。虚拟鼠标事件也会把书剑中放出的坐标信息标准化。所以在基于触摸的设备中事件对象的pageX, pageY, screenX, 
screenY, clientX, and clientY这些属性的坐标都可以用。</div>
  </div> 
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



